import { BaseEdge } from "@xyflow/react";

export default function SineEdge({ id, sourceX, sourceY, targetX, targetY }) {
  const centerX = (targetX - sourceX) / 2 + sourceX;
  const centerY = (targetY - sourceY) / 2 + sourceY;

  /**
   * Q x1 y1 x2 y2是二次贝塞尔曲线命令，
   * 它从当前点到 x2、y2 坐标绘制一条贝塞尔曲线。同时改变当前点
   * x1、y1 是曲线的控制点，决定了曲线的弯曲度。
   */
  const edgePath = `
  M ${sourceX} ${sourceY} 
  Q ${(targetX - sourceX) * 0.2 + sourceX} ${
    targetY * 1.1
  } ${centerX} ${centerY}
  Q ${(targetX - sourceX) * 0.8 + sourceX} ${
    sourceY * 0.9
  } ${targetX} ${targetY}
  `;

  return <BaseEdge id={id} path={edgePath} />;
}
